<template>
  <SelectTrigger label="影像加载方式" :options="options" width="350px" />
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示viewer 的一些配置项，隐藏所有的组件、商标等等，设置了天空盒子
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]);
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  options.value = [
    {
      text: "加载Cesium默认地形",
      onselect: async function () {
        // Bing地图影像，可以指定mapStyle，详见BingMapsStyle类
        const terrainProvider = await Cesium.createWorldTerrainAsync({
          requestWaterMask: true, // 请求水体效果所需要的海岸线数据
          requestVertexNormals: true, // 请求地形照明数据
        });
        viewer.terrainProvider = terrainProvider; // 使用地形
        // viewer.scene.globe.depthTestAgainstTerrain = true; // 启用深度测试，让地形后面的东西消失。
        // viewer.scene.globe.enableLighting = true; // 对大气和雾启用动态照明效果
      },
    },
    {
      text: "使用Arcgis地形(空心球，不清楚是否是服务问题)",
      onselect: async function () {
        const terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
          url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
          // token:
          //   "KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg..",
        });
        viewer.terrainProvider = terrainProvider; // 使用地形
        // viewer.scene.setTerrainExaggeration(2.0); // 地形夸张
        // viewer.scene.globe.depthTestAgainstTerrain = true; // 启用深度测试，让地形后面的东西消失。
        // viewer.scene.globe.enableLighting = true; // 对大气和雾启用动态照明效果
      },
    },
    {
      text: "使用Cesium官方资产地形",
      onselect: async function () {
        const terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(1);
        viewer.terrainProvider = terrainProvider;
      },
    },
  ];
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
